import  {PureComponent} from 'react';
import {
  Card,
  Image,
  Tooltip,
  Avatar,
  Modal,
  Row,
  Col,
  Input,
  Button,
  Comment,
  Empty,
  Form,
  InputNumber,
  notification,
  Spin,
  DatePicker,
  Descriptions,
  Mentions,
  Timeline,
  message, Select
} from 'antd';
import React from 'react';
import { createFromIconfontCN, SmileOutlined, AliwangwangOutlined } from '@ant-design/icons';
import {connect} from "umi";
import styles from './style.less';
import moment from "moment";
const { Option } = Mentions;
const token = '73RX1DFMSzFYLeHU';

class Skill extends PureComponent{
  state={
    acg: null,
    poem: null,
    modalVisible: false,
    couplet: null,
    poemLoad: false,
    coupletLoad: false,
    history: null,
    historyLoad: false,
    idiom: null,
    idiomLoad: false,
    Qr: null,
    QrLoad: false,
    avatar: null,
    avatarLoad: false,
    picList: null,
    picLoad: false,
    imgLoading: false,
    imageUrl: '',
    backLoad: false,
    expressInfo: null,
    expressInfoLoad: false,
    dream: null,
    dreamLoad: false,
    weather: null,
    weatherLoad: false,
    musicInfo: null,
    musicLoad: false
  }

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({
      type: 'skill/fetch'
    });
    dispatch({
      type: 'skill/get60S'
    });
  }

  fetchOneProblem = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'skill/fatchOneProblem',
      payload: {
        token: token
      }
    }).then(res => {
      console.log(res);
    })
  }

  getACG = () => {
    const { dispatch } = this.props;
    this.setState({backLoad: true});
    dispatch({
      type: 'skill/getACG'
    }).then(res => {
      if (res.msg == 'success'){
        this.setState({
          acg: res.data,
          backLoad: false
        });
      }
    })
  }

  fetchPoem = values => {
    const { dispatch } = this.props;
    this.setState({poemLoad: true});
    dispatch({
      type: 'skill/fatchPoem',
      payload: values
    }).then(res => {
      if (res.code == 200){
        this.setState({
          poem: res.data,
          modalVisible: true,
          poemLoad: false
        });
      }
    })
  };

  fetchCouplet = values => {
    const { dispatch } = this.props;
    this.setState({coupletLoad: true});
    dispatch({
      type: 'skill/fatchCouplet',
      payload: values
    }).then(res => {
      if (res.code == 200){
        this.setState({
          couplet: res.data
        }, () => this.openNotification());
      }
    })
  };

  fetchEventHistory = values => {
    const { dispatch } = this.props;
    this.setState({historyLoad: true});
    let arr = moment(values.date).format('MM,DD').split(',');
    dispatch({
      type: 'skill/fetchEventHistory',
      payload: {
        month: parseInt(arr[0]),
        day: parseInt(arr[1])
      }
    }).then(res => {
      if (res.code == 200){
        this.setState({
          history: res.data,
          historyLoad: false
        });
      }
    })
  };

  openNotification = () => {
    const { couplet } = this.state;
    this.setState({coupletLoad: false});
    notification.open({
      message: '对联',
      description: [
        <Row style={{ color: '#10e9ac' }}><Col span={24}>{couplet.keyword}</Col></Row>,
        <Row style={{ color: '#10e9ac' }}><Col span={24}>{couplet.text}</Col></Row>
      ],
      icon: <SmileOutlined style={{ color: '#108ee9' }} />,
    });
  };

  closeModal = () => {
    this.setState({
      modalVisible: false,
      Qr: null,
      avatar: null
    });
  }

  fetchIdiom = values => {
    const { dispatch } = this.props;
    this.setState({idiomLoad: true});
    dispatch({
      type: 'skill/fetchIdiom',
      payload: {
        word: values.word
      }
    }).then(res => {
      if (res.code == 200){
        this.setState({
          idiom: res.data
        }, () => this.openNotification2());
      }
    })
  };

  getQr = values => {
    const { dispatch } = this.props;
    this.setState({QrLoad: true});
    dispatch({
      type: 'skill/getQr',
      payload: {
        content: values.content,
        size: 150,
        format: 'png',
        return: 'json'
      }
    }).then(res => {
      this.setState({
        Qr: res.data.qrcode,
        QrLoad: false
      });
    })
  };

  openNotification2 = () => {
    const { idiom } = this.state;
    this.setState({idiomLoad: false});
    notification.open({
      message: idiom[0].word,
      description: idiom.length > 0 && idiom.map((item) => [
        <Row style={{ color: '#10a4e9' }}><Col span={24}>{item.explanation}</Col></Row>,
        <Row style={{ color: '#10e9e2' }}><Col span={24}>{item.derivation}</Col></Row>,
        <Row style={{ color: '#10e9e2' }}><Col span={24}>{item.example}</Col></Row>
      ]),
      icon: <AliwangwangOutlined style={{ color: '#10e926' }} />,
    });
  };

  getQQAvatar = values => {
    const { dispatch } = this.props;
    this.setState({avatarLoad: true});
    dispatch({
      type: 'skill/getQQAvatar',
      payload: {
        email: values.email,
        size: 150,
        format: 'json'
      }
    }).then(res => {
      this.setState({
        avatar: res.data.avatar,
        avatarLoad: false
      })
    })
  };

  getDouTu = values => {
    const { dispatch } = this.props;
    this.setState({picLoad: true});
    dispatch({
      type: 'skill/getDouTu',
      payload: {
        keyword: values.keyword,
        type: values.type
      }
    }).then(res => {
      this.setState({
        picList: res.data,
        picLoad: false
      })
    })
  };

  handleChange = info => {
    if (info.file.status === 'uploading') {
      this.setState({ loading: true });
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, imageUrl =>
        this.setState({
          imageUrl,
          imgLoading: false,
        }),
      );
    }
  };

  getExpressInfo = values => {
    const { dispatch } = this.props;
    this.setState({expressInfoLoad: true});
    dispatch({
      type: 'skill/getExpressInfo',
      payload: {
        expressNumber: values.expressNumber
      }
    }).then(res => {
      if (res.desc == '请求成功'){
        message.success("查询成功!");
        this.setState({
          expressInfo: res.result,
          expressInfoLoad: false
        });
      }else {
        message.error("查询失败!");
      }
    })
  };

  searchDream = values => {
    const { dispatch } = this.props;
    this.setState({dreamLoad: true});
    dispatch({
      type: 'skill/searchDream',
      payload: {
        keyword: values.keyword
      }
    }).then(res => {
      if (res.desc == '请求成功'){
        message.success("查询成功!");
        this.setState({
          dream: res.result,
          dreamLoad: false
        });
      }else {
        message.error("查询失败!");
      }
    })
  };

  getWeather = values => {
    const { dispatch } = this.props;
    this.setState({weatherLoad: true});
    dispatch({
      type: 'skill/getWeather',
      payload: {
        area: values.area
      }
    }).then(res => {
      if (res.desc == '请求成功'){
        message.success("查询成功!");
        this.setState({
          weather: res.result,
          weatherLoad: false
        });
      }else {
        message.error("查询失败!");
      }
    })
  };

  searchMusic = values => {
    const { dispatch } = this.props;
    this.setState({musicLoad: true});
    dispatch({
      type: 'skill/searchMusic',
      payload: {
        keyword: values.keyword,
        type: values.type
      }
    }).then(res => {
      this.setState({musicLoad: true});
      console.log(res);
    })
  }

  render() {
    const {
      skill: {
        oneProblem,
        soul,
        sweet,
        comment,
        status,
        news
      },
      loading
    } = this.props;

    const {
      acg, modalVisible, poem, poemLoad, coupletLoad, history,
      historyLoad, idiomLoad, Qr, QrLoad, avatar, avatarLoad, picLoad,
      picList, backLoad, expressInfo, expressInfoLoad, dream, dreamLoad,
      weather, weatherLoad, musicInfo, musicLoad
    } = this.state;

    const IconFont = createFromIconfontCN({
      scriptUrl: '//at.alicdn.com/t/font_2648261_bp7r5fhzx94.js',
    });

    const antIcon = <SmileOutlined  style={{ fontSize: 24 }} spin />;

    return (
     <Spin spinning={backLoad} size="large" tip='切换背景中...' indicator={antIcon}>
      <Card
        bodyStyle={acg ? { opacity: 0.6 } : { opacity: 1 }}
        style={{ backgroundImage: `url(${acg && acg.url})` }}
        title={<span style={acg ? {color: 'white'} : { color: 'black'} }>功能合集</span>}
        bordered={false} loading={loading}
        extra={<a onClick={this.getACG}>切换背景</a>}
      >
        <Row>
          <Col span={24} style={{ textAlign: 'center'}}>
            <Image style={{ width: '100%' }} src={news && news.head_image}/>
          </Col>
        </Row>
        {news && news.news.length > 0 &&
          <Row>
            <Col span={24}>
              <Descriptions title={<span style={{color: '#EA1C25'}}>每日60s早报</span>}>
                {news.news.map((item) =>
                  <Descriptions.Item label="">{item}</Descriptions.Item>
                )}
              </Descriptions>
            </Col>
          </Row>
        }
        {status != 102 ?
          <Row>
            <Col span={6}>
              <Card title="每日一个问题" className={styles.card}>
                <h4>{oneProblem && oneProblem.title}</h4>
                <h5>{oneProblem && oneProblem.subtitle}</h5>
              </Card>
            </Col>
            <Col span={6}>
              <Card title="心灵毒鸡汤" className={styles.card}>
                <h4>{soul && soul.content}</h4>
              </Card>
            </Col>
            <Col span={6}>
              <Card title="土味情话" className={styles.card}>
                <h4>{sweet && sweet.content}</h4>
              </Card>
            </Col>
            <Col span={6}>
              <Card title={`歌曲: ${comment && comment.album}`} className={styles.card}>
                <Comment
                  author={<a>{comment && comment.comment_nickname}</a>}
                  avatar={
                    <Avatar
                      src={comment && comment.comment_avatar_url}
                      alt={comment && comment.author}
                    />
                  }
                  content={
                    <p>
                      {comment && comment.comment_content}
                    </p>
                  }
                  datetime={
                    <Tooltip title={comment && comment.published_date}>
                      <span>{comment && comment.published_date}</span>
                    </Tooltip>
                  }
                />
              </Card>
            </Col>
          </Row> :
          <Empty />
        }
        <Row>
          <Col span={12}>
            <Card title="藏头诗生成" className={styles.card2}>
              <Spin spinning={poemLoad} tip="生成中...">
                <Form onFinish={this.fetchPoem}>
                <Row>
                  <Col span={24}>
                    <Form.Item label='藏字内容' name='keyword'>
                      <Input placeholder='藏字内容' />
                    </Form.Item>
                  </Col>
                </Row>
                <Row>
                  <Col span={24}>
                    <Form.Item label='诗句格式' name='num'>
                      <Tooltip title="5 五言诗[默认]、7 七言诗">
                        <InputNumber style={{ width: '100%' }}/>
                      </Tooltip>
                    </Form.Item>
                  </Col>
                </Row>
                <Row>
                  <Col span={24}>
                    <Form.Item label='藏头位置' name='type'>
                      <Tooltip title="1 藏头[默认]、2 藏尾、3 藏中、4 递增、5 递减">
                        <InputNumber style={{ width: '100%' }}/>
                      </Tooltip>
                    </Form.Item>
                  </Col>
                </Row>
                <Row>
                  <Col span={24}>
                    <Form.Item label='押韵类型' name='rhyme'>
                      <Tooltip title="1 双句一压[默认]、2 双句押韵、3 一三四押">
                        <InputNumber style={{ width: '100%' }}/>
                      </Tooltip>
                    </Form.Item>
                  </Col>
                </Row>
                <Row>
                  <Col span={24}>
                    <span className={styles.submitButtons} style={{ textAlign: 'center' }}>
                      <Button style={{ marginLeft: 8 }} type="primary" htmlType="submit">
                        生成
                      </Button>
                    </span>
                  </Col>
                </Row>
              </Form>
              </Spin>
            </Card>
          </Col>
          <Col span={12}>
            <Card title="智能对联" className={styles.card2}>
              <Spin spinning={coupletLoad} tip="加载中...">
                <Form onFinish={this.fetchCouplet}>
                <Row>
                  <Col span={24}>
                    <Form.Item label='请输入上联' name='keyword'>
                      <Input placeholder='上联' />
                    </Form.Item>
                  </Col>
                </Row>
                <Row>
                  <Col span={24}>
                    <span className={styles.submitButtons} style={{ textAlign: 'center' }}>
                      <Button style={{ marginLeft: 8 }} type="primary" htmlType="submit">
                        查询
                      </Button>
                    </span>
                  </Col>
                </Row>
              </Form>
              </Spin>
            </Card>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Card title="历史上的今天">
              <Spin spinning={historyLoad} tip="查询中...">
                <Row>
                  <Col span={24}>
                    <Form onFinish={this.fetchEventHistory}>
                      <Row>
                        <Col span={12}>
                          <Form.Item label='日期' name='date'>
                            <DatePicker />
                          </Form.Item>
                        </Col>
                        <Col span={12}>
                          <span className={styles.submitButtons} style={{ textAlign: 'center' }}>
                          <Button style={{ marginLeft: 8 }} type="primary" htmlType="submit">
                            查询
                          </Button>
                        </span>
                        </Col>
                      </Row>
                    </Form>
                  </Col>
                </Row>
                {history && history.length > 0 && history.map((item) =>
                <Row>
                  <Col span={24}>
                    <Descriptions title={<span style={{color: '#EA1C25'}}>{item.title}</span>}>
                      <Descriptions.Item label="内容">{item.desc}</Descriptions.Item>
                    </Descriptions>
                  </Col>
                </Row>
                )
                }
              </Spin>
            </Card>
          </Col>
        </Row>
        <Row>
          <Col span={12}>
            <Card title="成语字典" className={styles.card}>
              <Spin spinning={idiomLoad} tip="查询中...">
                <Form onFinish={this.fetchIdiom}>
                  <Row>
                    <Col span={12}>
                      <Form.Item label='成语' name='word'>
                        <Input placeholder='请输入成语' />
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                    <span className={styles.submitButtons} style={{ textAlign: 'center' }}>
                      <Button style={{ marginLeft: 8 }} type="primary" htmlType="submit">
                        查询
                      </Button>
                    </span>
                    </Col>
                  </Row>
                </Form>
              </Spin>
            </Card>
          </Col>
          <Col span={12}>
            <Card title="二维码生成" className={styles.card}>
              <Spin spinning={QrLoad} tip="生成中...">
                <Form onFinish={this.getQr}>
                  <Row>
                    <Col span={12}>
                      <Form.Item label='生成内容' name='content'>
                        <Input placeholder='请输入内容' />
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                    <span className={styles.submitButtons} style={{ textAlign: 'center' }}>
                      <Button style={{ marginLeft: 8 }} type="primary" htmlType="submit">
                        生成
                      </Button>
                    </span>
                    </Col>
                  </Row>
                </Form>
              </Spin>
            </Card>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Card title="获取头像" className={styles.card}>
              <Spin spinning={avatarLoad} tip="获取中...">
                <Form onFinish={this.getQQAvatar}>
                  <Row>
                    <Col span={12}>
                      <Form.Item label='邮箱' name='email'>
                        <Mentions
                          style={{ width: '100%' }}
                          placeholder='请输入邮箱'
                        >
                          <Option value="qq.com">qq.com</Option>
                          <Option value="163.com">163.com</Option>
                        </Mentions>
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                    <span className={styles.submitButtons} style={{ textAlign: 'center' }}>
                      <Button style={{ marginLeft: 8 }} type="primary" htmlType="submit">
                        获取
                      </Button>
                    </span>
                    </Col>
                  </Row>
                </Form>
              </Spin>
            </Card>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Card title="表情包斗图" className={styles.card}>
              <Spin spinning={picLoad} tip="加载中...">
                <Form onFinish={this.getDouTu}>
                  <Row>
                    <Col span={8}>
                      <Form.Item label='关键字' name='keyword'>
                        <Input placeholder='请输入关键字' />
                      </Form.Item>
                    </Col>
                    <Col span={8} offset={1}>
                      <Form.Item label='来源[1-7]' name='type'>
                        <InputNumber/>
                      </Form.Item>
                    </Col>
                    <Col span={6}>
                    <span className={styles.submitButtons} style={{ textAlign: 'center' }}>
                      <Button style={{ marginLeft: 8 }} type="primary" htmlType="submit">
                        查询
                      </Button>
                    </span>
                    </Col>
                  </Row>
                </Form>
              </Spin>
            </Card>
          </Col>
        </Row>
        {picList && picList.length > 0 &&
          <Row>
            <Card title="表情包列表" className={styles.card}>
              <Image.PreviewGroup>
                {picList.map((item) => <Image width={150} src={item} />)}
              </Image.PreviewGroup>
            </Card>
          </Row>
        }
        <Row>
          <Col span={24}>
            <Card title="查询快递物流">
              <Spin spinning={expressInfoLoad} tip="查询中...">
                <Form onFinish={this.getExpressInfo}>
                  <Row>
                    <Col span={12}>
                      <Form.Item label='快递单号' name='expressNumber'>
                        <Input placeholder='请输入快递单号'/>
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                    <span className={styles.submitButtons} style={{ textAlign: 'center' }}>
                      <Button style={{ marginLeft: 8 }} type="primary" htmlType="submit">
                        查询
                      </Button>
                    </span>
                    </Col>
                  </Row>
                </Form>
                {expressInfo &&
                <Card bordered={false} title={<span><Avatar src={expressInfo.logo}/>&nbsp;{expressInfo.expName}</span>}>
                  <Timeline>
                    {expressInfo.list.map((item, index) =>
                      <Timeline.Item color={index==0 ? 'green' : 'gray'}>
                        <p>{item.status}</p>
                        <p>{item.time}</p>
                      </Timeline.Item>
                    )}
                  </Timeline>
                </Card>
                }
              </Spin>
            </Card>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Card title="周公解梦">
              <Spin spinning={dreamLoad} tip="查询中...">
                <Form onFinish={this.searchDream}>
                  <Row>
                    <Col span={12}>
                      <Form.Item label='关键字' name='keyword'>
                        <Input placeholder='请输入关键字'/>
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                    <span className={styles.submitButtons} style={{ textAlign: 'center' }}>
                      <Button style={{ marginLeft: 8 }} type="primary" htmlType="submit">
                        查询
                      </Button>
                    </span>
                    </Col>
                  </Row>
                </Form>
                {dream &&
                <Card bordered={false} title={dream[0].title}>
                  <div style={{color: 'rgb(99,180,99)'}}>
                    {dream[0].content.replaceAll('<p>','').replaceAll('</p>','')}
                  </div>
                </Card>
                }
              </Spin>
            </Card>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Card title="天气查询">
              <Spin spinning={weatherLoad} tip="查询中...">
                <Form onFinish={this.getWeather}>
                  <Row>
                    <Col span={12}>
                      <Form.Item label='城市' name='area'>
                        <Input placeholder='请输入城市名称'/>
                      </Form.Item>
                    </Col>
                    <Col span={12}>
                    <span className={styles.submitButtons} style={{ textAlign: 'center' }}>
                      <Button style={{ marginLeft: 8 }} type="primary" htmlType="submit">
                        查询
                      </Button>
                    </span>
                    </Col>
                  </Row>
                </Form>
                {weather &&
                <Card bordered={false} title={weather.area}>
                  <Timeline>
                  {weather.dayList.map((item) =>
                    <Timeline.Item color={(item.day_weather == '晴' || item.day_weather == '多云') ? 'green' : (item.day_weather == '阴' ? 'gray' : 'red')}>
                      <p>
                        白天&nbsp;&nbsp;
                        <Avatar src={item.day_weather_pic} />&nbsp;&nbsp;{item.day_weather}&nbsp;
                        {`${item.day_air_temperature}°C`}&nbsp;&nbsp;
                        {item.day_wind_direction}&nbsp;{item.day_wind_power}
                      </p>
                      <p>
                        晚上&nbsp;&nbsp;
                        <Avatar src={item.night_weather_pic} />&nbsp;&nbsp;{item.night_weather}&nbsp;
                        {`${item.night_air_temperature}°C`}&nbsp;&nbsp;
                        {item.night_wind_direction}&nbsp;{item.night_wind_power}
                      </p>
                      <p>{moment(item.daytime).format('YYYY-MM-DD')}</p>
                    </Timeline.Item>
                  )}
                  </Timeline>
                </Card>
                }
              </Spin>
            </Card>
          </Col>
        </Row>
        <Row>
          <Col span={24}>
            <Card title="歌曲查询">
              <Spin spinning={musicLoad} tip="查询中...">
                <Form onFinish={this.searchMusic}>
                  <Row>
                    <Col span={10}>
                      <Form.Item label='名称' name='keyword'>
                        <Input style={{ width: '50%' }} placeholder='请输入歌曲名称'/>
                      </Form.Item>
                    </Col>
                    <Col span={10}>
                      <Form.Item label='平台' name='type'>
                        <Select style={{ width: '50%' }}>
                          <Option value='kugou'>酷狗</Option>
                          <Option value='netease'>网易</Option>
                          <Option value='qq'>QQ</Option>
                          <Option value='baidu'>百度</Option>
                        </Select>
                      </Form.Item>
                    </Col>
                    <Col span={4}>
                    <span className={styles.submitButtons} style={{ textAlign: 'center' }}>
                      <Button style={{ marginLeft: 8 }} type="primary" htmlType="submit">
                        查询
                      </Button>
                    </span>
                    </Col>
                  </Row>
                </Form>
                {/*{weather &&*/}
                {/*<Card bordered={false} title={weather.area}>*/}
                {/*  <Timeline>*/}
                {/*    {weather.dayList.map((item) =>*/}
                {/*      <Timeline.Item color={(item.day_weather == '晴' || item.day_weather == '多云') ? 'green' : (item.day_weather == '阴' ? 'gray' : 'red')}>*/}
                {/*        <p>*/}
                {/*          白天&nbsp;&nbsp;*/}
                {/*          <Avatar src={item.day_weather_pic} />&nbsp;&nbsp;{item.day_weather}&nbsp;*/}
                {/*          {`${item.day_air_temperature}°C`}&nbsp;&nbsp;*/}
                {/*          {item.day_wind_direction}&nbsp;{item.day_wind_power}*/}
                {/*        </p>*/}
                {/*        <p>*/}
                {/*          晚上&nbsp;&nbsp;*/}
                {/*          <Avatar src={item.night_weather_pic} />&nbsp;&nbsp;{item.night_weather}&nbsp;*/}
                {/*          {`${item.night_air_temperature}°C`}&nbsp;&nbsp;*/}
                {/*          {item.night_wind_direction}&nbsp;{item.night_wind_power}*/}
                {/*        </p>*/}
                {/*        <p>{moment(item.daytime).format('YYYY-MM-DD')}</p>*/}
                {/*      </Timeline.Item>*/}
                {/*    )}*/}
                {/*  </Timeline>*/}
                {/*</Card>*/}
                {/*}*/}
              </Spin>
            </Card>
          </Col>
        </Row>
        {modalVisible &&
        <Modal
          title={<span style={{color: '#EA1C25'}}>{poem.keyword}</span>}
          visible={modalVisible}
          onOk={this.closeModal}
          onCancel={this.closeModal}
          >
          {poem && poem.list.length > 0 && poem.list.map((item) => <h3 style={{color: '#1890ff'}}>{item}</h3>)}
        </Modal>
        }
        {Qr &&
          <Modal
            visible={Qr != null}
            onOk={this.closeModal}
            onCancel={this.closeModal}
            footer={null}
            width={200}
          >
            <Image src={Qr} />
          </Modal>
        }
        {avatar &&
        <Modal
          visible={avatar != null}
          onOk={this.closeModal}
          onCancel={this.closeModal}
          footer={null}
          width={200}
        >
          <Image src={avatar} />
        </Modal>
        }
      </Card>
     </Spin>
    )
  }
}

export default connect(({ skill, loading }) => ({
  skill,
  loading: loading.effects['skill/fetch']
}))(Skill);
